<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        .box{
            width: 500px;
            margin: 0 auto;
        }
        .box .content{
            line-height: 30px;
        }
        .box .right{
            float: right;
        }
        .box .right strong{
            color: orange;
            font-size: 26px;
        }
        .input .text{
            width: 100%;
            height: 120px;
            resize: none;
            border:1px solid #aaa;
            box-shadow: 0 0 5px #ccc inset;
            padding: 10px;
            font-size: 16px;
        }
        .input .text:focus{
            border-color:orange;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="conten">
            <span>有什么新鲜事想告诉大家？</span>
            <span class="right">可以发布超过<strong>140</strong>字的微博啦</span>
        </div>
        <div class="input">
            <textarea class="text"></textarea>
        </div>
    </div>
</body>
</html>
<script>
   $('.input .text').keyup(textNum);
   $('.input .text').focus(textNum);

   function textNum(){
    //    获取文本框字符的长度
       var length = $(this).val().length;

       var currentLength = 0;
       if(length>0){
           for(var i = 0;i<length;i++){
               if($(this).val().charCodeAt(i)>255){
                   currentLength += 1;
               }else{
                   currentLength += 0.5
               }
           }
       }
       var result = Math.ceil(currentLength);
       if(result > 140){
           $('.right').html('已输入<strong style="colo:gray;">'+result+'</strong>字')
       }else{
           $('.right').html('已输入<strong style="color:orange;">'+result+'</strong>字')
       }
   }
    
</script>